const plugin = require('tailwindcss/plugin');
const getResetObj = require('./reset');

const theme = {
  extend: {
    colors: require('./color/index.js'),
    spacing: require('./space.js'),
    borderRadius: require('./border-radius.js'),
    textColor: require('./color/text-colors.js'),
    backgroundColor: require('./color/bg-colors.js'),
    fontFamily: require('./font.js').fontFamily,
    fontSize: require('./font.js').fontSize,
  },
};

const responsiveVariants = ['sm', 'md', 'lg', 'xl', '2xl'];

module.exports = {
  corePlugins: {
    preflight: false,
  },
  theme: theme,
  safelist: [
    {
      pattern: /grid-cols-*/,
      variants: responsiveVariants,
    },
    {
      pattern: /grid-rows-*/,
      variants: responsiveVariants,
    },
    {
      pattern: /col-span-*/,
      variants: responsiveVariants,
    },
    {
      pattern: /gap-*/,
    },
    {
      pattern: /row-span-*/,
      variants: responsiveVariants,
    },
    {
      pattern: /line-clamp-*/,
    },
  ],
  plugins: [
    plugin(({addBase, addComponents, addUtilities, theme}) => {
      addComponents(require('./material.js'));
      addBase(getResetObj(theme));
    }),
  ],
};
